<template>
  <div class="box w-60vw  absolute bg-light-100  bg-opacity-90 " ></div>

  <el-carousel ref="carousel" @change="getIndex"  trigger="click" class="custom-carousel p-2.4% sm:p-0 box-border" direction="vertical" :autoplay="false"  :loop="false"> 
    <el-carousel-item v-for="strategy,index in strategyList" :key="index" class=" custom-carousel-item">
      <div class="pt-1 w-full h-full ">
        <ul class=" rounded-lg h-full" >
          <li  v-for="item in strategy" :key="item._id"
            ref="strategyDom" 
            class=" article-item py-2 sm:py-4 px-2 sm:px-8 h-19% sm:h-auto  divide_b flex justify-between ">
            <!-- 图标 -->
            <div class="w-10% flex flex-col justify-around items-center pr-2 sm:pr-6 md:pr-8">
              <RouterLink :to="`/article/${item._id}#reply`">
                <div class="i-carbon-chat wh-6 opacity-50"></div>
              </RouterLink>
              <div class="border-b-2 border-dashed  w-80%"></div>
              <!-- 点赞 -->
              <template v-if="item.isVote">
                <div class="i-carbon-thumbs-up cursor-pointer wh-6 opacity-80 bg-gradient-to-r from-blue-600 to-purple-500  "
                  @click="addLiking(item._id,$event)" :data-flag="item?.isVote"></div>
              </template>
              <template v-else>
                <div class="i-carbon-thumbs-up wh-6 cursor-pointer opacity-50 " @click="addLiking(item._id,$event)"
                  :data-flag="item?.isVote"></div>
              </template>
      
              <div class="border-b-2 border-dashed w-80%"></div>
      
              <!-- 收藏 -->
              <template v-if="item.isCollected">
                <div class="i-carbon-star cursor-pointer wh-6 opacity-80 bg-gradient-to-r from-blue-600 to-purple-500"
                  @click="addCollection(item._id,$event)" :data-flag="item.isCollected"></div>
              </template>
              <template v-else>
                <div class="i-carbon-star cursor-pointer wh-6 opacity-50" @click="addCollection(item._id,$event)"
                  :data-flag="item.isCollected"></div>
              </template>
      
            </div>

            <div class="contain flex justify-evenly overflow-ellipsis overflow-hidden" >
              <!-- 内容盒子 -->
              <div class=" overflow-ellipsis overflow-hidden w-full sm:w-60%">
                <!-- 标题 -->
                <RouterLink :to="`/article/${item._id}`" class="w-full">
                  <div class=" truncate pt-2 text-xl leading-5 font-bold hover:text-blue-500 title">{{item.title}}</div>
                </RouterLink>
                <!-- 内容 -->
                <div class="sm:text-base content line-clamp-3 mt-4 text-sm">{{item.text}}</div>
                <!-- 时间  -->
                <div class="mt-4 h3 text-sm text-right">{{dateFormat(item?.createdAt)}}</div>
              </div>
              
              <!-- 图片 -->
              <div class=" flex justify-center items-center w-0 sm:w-40%   hover:animate-pulse">
                <RouterLink :to="`/article/${item._id}`">
                  <el-image v-if="item.images.length===0"></el-image>
                  <img v-else class="px-1 object-cover" style="width: 90%; max-height: 9rem; border-radius: 1rem;aspect-ratio: 12/6; "
                    :src="IMG_URL_SERVER+ item.images[0].url" alt="">
                </RouterLink>
              </div>
            </div>
            
      
          </li>
        </ul>
      </div>
    </el-carousel-item>
  </el-carousel>

</template>

<script setup lang="ts">
import { useThrottleFn } from '@vueuse/core'
import { fetchCateTopic, fetchLikingTopic, fetchUnLikingTopic, fetchCollectingTopic, fetchUnCollectingTopic } from "@/server"
import { IMG_URL_SERVER } from "@/config"
import { dateFormat } from "@/utils"
import { gsap } from "gsap";
import { useSwipe } from '@vueuse/core'


//router
const route = useRoute()
//帖子列表
const strategyList: any = ref([])
//登录用户Store
const authStore = useAuthStore()
//utilsStore
const utilsStore = useUtilsStore()
//轮播
const carousel =ref()
//reload 重载
const { reloadFlag} = inject<any>('reload')
//刷新等待时间
// const loadingTime = 600
//strategyDom
const strategyDom = ref()







//轮播index
const carouselIndex = ref(0)
const getIndex = (i:number)=>{
  carouselIndex.value = i
  //特效
  gsap.fromTo(strategyDom.value.slice(carouselIndex.value * 4, carouselIndex.value * 4 + 4), {
    xPercent: -100
  }, {
    xPercent: 0,
    delay: 0.3,
    stagger: 0.2,
    onComplete() {
      loading.value = false
    }

  })
}




//等待
const loading = ref(false)
//切换屏幕
const throttledFn = useThrottleFn((e?:any) => {
  if (e.deltaY > 0){
    if ((carouselIndex.value === strategyList.value.length - 1) || loading.value)  return;
    loading.value = true
    carousel.value.next();
  } 
  if (e.deltaY < 0){
    if (carouselIndex.value === 0 || loading.value) return;
    loading.value = true
    carousel.value.prev();
  } 
},500)


//点击点赞
const addLiking = (id: any, e: any) => {
  //保护条款
  if (!authStore.isAuthenticated) {
    utilsStore.dialogTableVisible = true
    return false;
  }
  if (e.target.dataset?.flag === 'false') {
    fetchLikingTopic(id, () => {
      e.target.dataset.flag = 'true'
      e.target.classList.add("opacity-80", "bg-gradient-to-r", "from-blue-600", "to-purple-500")
      e.target.classList.remove("opacity-50")
      return true;
    })
  } else {
    fetchUnLikingTopic(id, () => {
      e.target.dataset.flag = 'false'
      e.target.classList.remove("opacity-80", "bg-gradient-to-r", "from-blue-600", "to-purple-500")
      e.target.classList.add("opacity-50")
      return true;
    })
  }
}

//点击收藏
const addCollection = (id: any, e: any) => {
  //保护条款
  if (!authStore.isAuthenticated) {
    utilsStore.dialogTableVisible = true
    return false;
  }
  if (e.target.dataset?.flag === 'false') {
    fetchCollectingTopic(id, () => {
      e.target.dataset.flag = 'true'
      e.target.classList.add("opacity-80", "bg-gradient-to-r", "from-blue-600", "to-purple-500")
      e.target.classList.remove("opacity-50")
      return true;
    })
  } else {
    fetchUnCollectingTopic(id, () => {
      e.target.dataset.flag = 'false'
      e.target.classList.remove("opacity-80", "bg-gradient-to-r", "from-blue-600", "to-purple-500")
      e.target.classList.add("opacity-50")
      return true;
    })
  }
}
//转换二维数组
function arrChange(num:any, arr:any) {
  const newArr = [];
  while (arr.length > 0) {
    newArr.push(arr.splice(0, num));
  }
  return newArr;
}

watchEffect(() => {  
  if (reloadFlag.value || route.params.id) {
    fetchCateTopic("攻略", () => true).then(async (data) => {
      strategyList.value = arrChange(4, data)
      await nextTick()
      carousel.value.setActiveItem(0)
      
    })
  }
})



watch(carousel,()=>{
  const { isSwiping, direction } = useSwipe(carousel)
  const throttledFn = useThrottleFn(()=>{
    if (direction.value === "UP") {
      if ((carouselIndex.value === strategyList.value.length - 1) || loading.value) return;
      loading.value = true
      carousel.value.next();
    }
    if (direction.value === "DOWN") {
      if (carouselIndex.value === 0 || loading.value) return;
      loading.value = true
      carousel.value.prev();
    } 
  },500)
  watch(isSwiping,()=>{
    throttledFn()
  })

})
onMounted(()=>{
  document.addEventListener("wheel", throttledFn)

})

onUnmounted(()=>{
  document.removeEventListener("wheel", throttledFn)
})

</script>

<style scoped lang="scss">
.article-item:nth-child(2n){
  .contain{
    flex-direction: row-reverse;
  }
}
// .el-carousel__item:nth-child(2n) {
//   background-color: #99a9bf;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #d3dce6;
// }

.el-carousel {
  --el-carousel-arrow-font-size: 2rem;
  --el-carousel-arrow-size: 4rem;
  --el-carousel-arrow-background: rgba(31, 45, 61, 0.11);
  --el-carousel-arrow-hover-background: #4f4f4fd9;
  --el-carousel-indicator-out-color: #ffffff;
  
}

:deep(.el-carousel__container) {
  // min-height:90vh;
  
}
.box{
  min-height: calc(100vh - 4.5rem);
  @media screen and (max-width:1280px) {
    width: 68vw;
  }
  @media screen and (max-width:1024px) {
    width: 80vw;
  }
  @media screen and (max-width:640px) {
    width: 100vw;
  }
}
.custom-carousel {
  min-height: calc(100vh - 12rem);
  .el-carousel__arrow {
    
  }
  :deep(.el-carousel__indicator){
    pointer-events: none !important;
  }

  .custom-carousel-item {
    min-height: 100cqh;
    border-radius: 0.5rem;
  }
}
</style>

<route lang="yaml">
meta:
  layout: home
</route>
